<template>
    用户管理
    <el-row>
        <!--        <el-form :model="queryForm">-->
        <el-col :span="4">用户名:</el-col>
        <el-col :span="4">
            <el-input v-model="queryObj.userName"/>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="queryDate">搜索</el-button>
            <el-button type="success" @click="handleAdd">添加</el-button>
        </el-col>
        <el-col :span="4">
            <el-button type="warning" @click="handleDeleteAll">批量删除</el-button>
        </el-col>
        <!--        </el-form>-->
    </el-row>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="用户名" property="userName" width="200"/>
        <el-table-column label="邮箱" property="email" width="200"/>
        <el-table-column label="角色" property="roleName" width="200"/>
        <el-table-column label="注册时间" property="createTime" show-overflow-tooltip width="280"/>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next, sizes"
            :total="pageObj.total"
            v-model:page-size="queryObj.pageSize"
            :page-sizes="[10,20,30]"
            @change="handlePageChange"
    />


    <!--    弹出窗体    -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500" @close="handleFlush">
        <user-form ref="userFormDialogRef" @flush="handleFlush"></user-form>
    </el-dialog>
</template>
<script setup lang="ts">
    import {ref, reactive, onMounted, nextTick} from 'vue'
    import {ElMessage, ElMessageBox, FormInstance, FormRules} from 'element-plus'
    import {useRouter} from 'vue-router'
    import UserForm from './UserFormDialog.vue'
    import axios from "axios";

    const router = useRouter()

    const pageObj = ref({total: 0})

    const queryObj = ref({pageSize: 10, pageNum: 1, userName: '', email: ''})

    const tableData = ref()

    onMounted(() => {
        queryDate()
    })

    /**
     * ajax获得数据
     */
    const queryDate = () => {
        axios.post('/user/query', queryObj.value)
            .then(data => {
                console.log(data)
                tableData.value = data.list
                pageObj.value.total = data.total
            })
    }

    /**
     * 分页控制
     */
    const handlePageChange = (pageNum, pageSize) => {
        queryObj.value.pageNum = pageNum
        queryObj.value.pageSize = pageSize
        queryDate();
    }

    /**
     * 添加用户
     */
    const title = ref('添加用户')
    const dialogFormVisible = ref(false)

    //定义userForm组件的ref
    const userFormDialogRef = ref()
    const handleAdd = () => {
        title.value = '添加用户'
        dialogFormVisible.value = true
        nextTick(() => {
            userFormDialogRef.value.initUserForm()
        })
    }
    /**
     * 编辑用户
     */
        //const rowProps = ref() // 使用prop向子组件传参
    const handleEdit = (index, row) => {
            title.value = '修改用户'
            dialogFormVisible.value = true
            nextTick(() => {
                userFormDialogRef.value.initUserForm(row)
            })
            //rowProps.value = row   // 使用prop向子组件传参
        }

    /**
     * 刷新页面
     */
    const handleFlush = () => {
        //获得并修改pageNum
        userFormDialogRef.value.userFormRef.resetFields()
        dialogFormVisible.value = false
        queryDate();
    }

    /**
     * 删除用户
     */
    const handleDelete = (index, row) => {
        console.log(row)
        ElMessageBox.confirm(`是否要删除该用户：${row.userName}`, '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
        }).then(async ({value}) => {
            await deleteUser(row.userId)
            await queryDate()
        })
    }

    /**
     * 多选操作
     */
    let ids = ''
    const handleSelectionChange = (rows) => {
        ids = rows.map(row => row.userId).join(",");
    }
    /**
     *  删除所选用户
     */
    const handleDeleteAll = () => {
        if (ids == '') {
            ElMessage.error("请选择需要删除的用户！")
            return false
        }
        ElMessageBox.confirm(`是否批量删除用户？`, '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
        }).then(async ({value}) => {
            await deleteUser(ids) // 1,2,3,4
            await queryDate()
        })
    }
    //删除操作
    const deleteUser = (ids) => {
        axios.get("http://localhost:8080/user/delete/" + ids)
            .then(ret => {
                if (ret.data.code == 200) {
                    ElMessage.success("删除成功！")
                    //queryDate()
                } else {
                    ElMessage.error(ret.data.message)
                }
            })
    }
</script>
